<template>
  <div class="app-container">
    <!--    查询对话框-->
    <el-dialog
      :title="title"
      v-model="openSearch"
      :close-on-click-modal="false"
      draggable
      width="580px"
      append-to-body
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        style="margin-left: 20px"
        v-show="showSearch"
        label-width="90px"
      >
        <el-col :span="24">
          <el-form-item label="机台编号" prop="moeJtbh">
            <el-input
              v-model="queryParams.moeJtbh"
              placeholder="请输入机台编号"
              clearable
              style="width: 400px"
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="组别代码" prop="moeBbdm">
            <el-input
              v-model="queryParams.moeBbdm"
              clearable
              placeholder="请输入组别代码"
              style="width: 400px"
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            style="display: flex; margin-top: 20px; justify-content: flex-end"
          >
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="handleQuery">确认</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-dialog>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-search"
          size="mini"
          @click="handleSearch"
          v-hasPermi="['produce:materialMatain:query']"
        >
          搜索
        </el-button>
      </el-col>
      <Tag type="dot" size="default" color="#0fac09">进行</Tag>
      <Tag type="dot" size="default" color="#bb0331">等待</Tag>
      <Tag type="dot" size="default" color="#61b2e0">暂停</Tag>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
      <el-pagination
        :page-size="queryParams.pageSize"
        :current-page.sync="queryParams.pageNum"
        @current-change="getList"
        layout="total, prev, pager, next"
        :total="total"
        style="float: right"
      ></el-pagination>
    </el-row>
    <el-col :span="21">
      <el-table
        highlight-current-row
        v-loading="loading"
        :data="startOrderList"
        border
        stripe
        height="333px"
        :cell-style="iCellStyle"
        @row-click="getMx"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column
          label="#"
          type="index"
          fixed="left"
          width="55"
          align="center"
        />
        <el-table-column
          label="机台"
          :show-overflow-tooltip="true"
          width="80"
          align="center"
          prop="moeJtbh"
        />
        <el-table-column
          label="班别代码"
          :show-overflow-tooltip="true"
          width="80"
          align="center"
          prop="moeBbdm"
        />
        <el-table-column
          label="生产日期"
          :show-overflow-tooltip="true"
          align="center"
          prop="moeScrq"
          width="150"
        >
          <template #default="scope">
            <span>{{
              parseTime(scope.row.moeScrq, "{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="序号"
          width="80"
          align="center"
          :show-overflow-tooltip="true"
          prop="moeScxh"
        />
        <el-table-column
          label="制造单号"
          :show-overflow-tooltip="true"
          width="132"
          align="center"
          prop="moeZzdh"
        />
        <el-table-column
          label="销售单号"
          width="135"
          :show-overflow-tooltip="true"
          prop="moeSodh"
        />
        <el-table-column
          label="品名规格"
          :show-overflow-tooltip="true"
          width="400"
          align="center"
          prop="moePmgg"
        />
        <el-table-column
          label="模具编号"
          :show-overflow-tooltip="true"
          width="135"
          align="center"
          prop="moeMjbh"
        />
        <el-table-column
          label="物料代码"
          :show-overflow-tooltip="true"
          width="135"
          align="center"
          prop="moeWldm"
        />
        <el-table-column
          label="材质"
          :show-overflow-tooltip="true"
          width="120"
          align="center"
          prop="moeCzdm"
        />
        <el-table-column
          label="颜色"
          :show-overflow-tooltip="true"
          width="120"
          align="center"
          prop="moeYsdm"
        />
        <el-table-column
          label="完工日期"
          :show-overflow-tooltip="true"
          align="center"
          prop="moeWgrq"
          width="150"
        >
          <template #default="scope">
            <span>{{
              parseTime(scope.row.moeWgrq, "{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="计划数量"
          :show-overflow-tooltip="true"
          width="80"
          align="center"
          prop="moeScsl"
        />
        <el-table-column
          label="良品数量"
          :show-overflow-tooltip="true"
          width="80"
          align="center"
          prop="moeLpsl"
        />
        <el-table-column
          label="不良数量"
          :show-overflow-tooltip="true"
          width="80"
          align="center"
          prop="moeBlsl"
        />
        <el-table-column
          label="实际上线时间"
          :show-overflow-tooltip="true"
          align="center"
          prop="moeSxrq"
          width="150"
        >
          <template #default="scope">
            <span>{{
              parseTime(scope.row.moeSxrq, "{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="实际下线时间"
          :show-overflow-tooltip="true"
          align="center"
          prop="moeXxrq"
          min-width="150"
        >
          <template #default="scope">
            <span>{{
              parseTime(scope.row.moeXxrq, "{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          width="80"
          class-name="small-padding fixed-width"
          v-if="firstState"
        >
          <template #default="scope">
            <el-button
              :disabled="!scope.row.moeId"
              icon="el-icon-s-check"
              size="mini"
              type="text"
              @click="firstPart(scope.row)"
            >
              首件
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="border: 1px solid white; margin-top: 1px"></div>

      <el-table
        highlight-current-row
        :data="startOrderMxList"
        border
        stripe
        :cell-style="iCellStyle2"
        :height="tableHChild"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column
          label="#"
          type="index"
          fixed="left"
          width="55"
          align="center"
        />
        <el-table-column
          label="生产日期"
          :show-overflow-tooltip="true"
          align="center"
          prop="moeScrq"
          width="150"
        >
          <template #default="scope">
            <span>{{
              parseTime(scope.row.moeScrq, "{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="序号"
          width="55"
          align="center"
          :show-overflow-tooltip="true"
          prop="moeScxh"
        />
        <el-table-column
          label="品名规格"
          :show-overflow-tooltip="true"
          width="400"
          align="center"
          prop="moePmgg"
        />
        <el-table-column
          label="计划数量"
          :show-overflow-tooltip="true"
          width="80"
          align="center"
          prop="moeScsl"
        />
        <el-table-column
          label="良品数量"
          :show-overflow-tooltip="true"
          width="80"
          align="center"
          prop="moeLpsl"
        />
        <el-table-column
          label="制造单号"
          :show-overflow-tooltip="true"
          width="135"
          align="center"
          prop="moeZzdh"
        />
        <el-table-column
          label="销售单号"
          width="135"
          :show-overflow-tooltip="true"
          prop="moeSodh"
        />
        <el-table-column
          label="模具编号"
          :show-overflow-tooltip="true"
          width="135"
          align="center"
          prop="moeMjbh"
        />
        <el-table-column
          label="模具名称"
          :show-overflow-tooltip="true"
          width="100"
          align="center"
          prop="moeMjmc"
        />
        <el-table-column
          label="父项物料"
          :show-overflow-tooltip="true"
          width="135"
          align="center"
          prop="somWldm"
        />
        <el-table-column
          label="父项品名规格"
          :show-overflow-tooltip="true"
          width="400"
          align="center"
          prop="somPmgg"
        />
        <el-table-column
          label="物料代码"
          :show-overflow-tooltip="true"
          width="135"
          align="center"
          prop="moeWldm"
        />
        <el-table-column
          label="材质"
          :show-overflow-tooltip="true"
          width="100"
          align="center"
          prop="moeCzdm"
        />
        <el-table-column
          label="颜色"
          :show-overflow-tooltip="true"
          width="100"
          align="center"
          prop="moeYsdm"
        />
        <el-table-column
          label="完工日期"
          :show-overflow-tooltip="true"
          align="center"
          prop="moeWgrq"
          width="150"
        >
          <template #default="scope">
            <span>{{
              parseTime(scope.row.moeWgrq, "{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="组合ID"
          :show-overflow-tooltip="true"
          width="100"
          align="center"
          prop="gllGlid"
        />
        <el-table-column
          label="穴数"
          :show-overflow-tooltip="true"
          width="80"
          align="center"
          prop="moeXs"
        />
        <el-table-column
          label="实际上线时间"
          :show-overflow-tooltip="true"
          align="center"
          prop="moeSxrq"
          width="150"
        >
          <template #default="scope">
            <span>{{
              parseTime(scope.row.moeSxrq, "{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="实际下线时间"
          :show-overflow-tooltip="true"
          align="center"
          prop="moeXxrq"
          width="150"
        >
          <template #default="scope">
            <span>{{
              parseTime(scope.row.moeXxrq, "{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          width="80"
          class-name="small-padding fixed-width"
          v-if="!firstState"
        >
          <template #default="scope">
            <el-button
              v-if="scope.row.moeZtbz != 1"
              size="mini"
              type="text"
              @click="handleManageMoe(scope.row)"
              v-hasPermi="['production:startMoe:edit']"
            >
              启动
            </el-button>
            <el-button
              v-if="scope.row.moeZtbz == 1"
              size="mini"
              type="text"
              @click="handleManageMoe(scope.row)"
              v-hasPermi="['production:startMoe:edit']"
            >
              暂停
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="3" style="height: 100%">
      <el-table
        highlight-current-row
        v-loading="loading"
        :data="totalList"
        border
        stripe
        height="calc(100% - 100px)"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column
          label="机台"
          :show-overflow-tooltip="true"
          min-width="20%"
          align="center"
          prop="moeJtbh"
        />
        <el-table-column
          label="启动数量"
          :show-overflow-tooltip="true"
          min-width="20%"
          align="center"
          prop="moeCount"
        />
      </el-table>
    </el-col>
  </div>
</template>

<script>
import { getAllCustomer } from "@/api/project/customer";
import { getAllCgList } from "@/api/project/mstr";
import {
  listGdgs,
  listMx,
  listStartOrder,
  listTotal,
  moeMstrCheck,
} from "@/api/production/startOrder";
import { brushFirstPart } from "@/api/quality/firstPart";

export default {
  name: "StartOrder",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      moeZtbz: null,
      //子项Mol数组
      startOrderMxList: [],
      tableH: (document.body.clientHeight - 180) / 2,
      tableHE: document.body.clientHeight - 178,
      tableHChild: (document.body.clientHeight - 180) / 2,
      tabled: document.body.clientHeight - 200,
      //用来保存的Mol数组
      savestartOrderMxList: [],
      somDjbhs: [],
      //当前数据
      currentData: [],
      //采购属性
      bomCgsxOptions: [],
      //未维护的材料明细
      NoneMaintain: [],
      //保存当前Som
      nowData: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 营销订单维护表格数据
      startOrderList: [],
      //汇总数据
      totalList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openSearch: false,
      // 状态标志字典
      somZtbzOptions: [],
      //根据客户代码查询出物料信息
      selectedItmMstr: [],
      // 订单类型字典
      somOrderZtbzOptions: [],
      //单位类型字典
      itmDwOptions: [],
      //客户类型
      customerOptions: [],
      // 首件页面
      firstState: this.$route.query.firstState,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 12,
        moeJtbh: null,
        moeBbdm: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.getList();

    //得到单位
    this.getDicts("sys_unit").then((response) => {
      this.itmDwOptions = response.data;
    });

    //得到客户
    getAllCustomer().then((response) => {
      for (let i of response.data) {
        i.dictLabel = i.cusName;
        i.dictValue = i.cusId + "";
        i.listClass = "default";
      }
      this.customerOptions = response.data;
    });
    //得到维护类型
    this.getDicts("material_matain_ztbz").then((response) => {
      this.somOrderZtbzOptions = response.data;
    });

    //得到采购属性
    getAllCgList().then((response) => {
      this.bomCgsxOptions = response.data;
      for (let i of this.bomCgsxOptions) {
        i.dictLabel = i.cgName;
        i.dictValue = i.cgId + "";
        i.listClass = "default";
      }
    });
  },
  methods: {
    /** 查询营销订单维护列表 */
    getList(row) {
      this.loading = true;
      listStartOrder(this.queryParams).then((response) => {
        this.startOrderList = response.rows;
        this.total = response.total;
        this.loading = false;

        if (row && row.moeJtbh) {
          this.getMx(row);
        } else if (this.startOrderList.length > 0) {
          this.getMx(this.startOrderList[0]);
        } else {
          this.startOrderMxList = [];
        }
      });
      listTotal().then((res) => {
        this.totalList = res.data;
      });
    },

    iCellStyle: function ({ row, column, rowIndex, columnIndex }) {
      //提交
      if (row.moeZtbz == "1") {
        return "color:#0fac09";
      }
    },
    iCellStyle2: function ({ row, column, rowIndex, columnIndex }) {
      //提交
      if (row.moeZtbz == "1") {
        return "color:#0fac09";
      }
      //通过
      else if (row.moeZtbz == "2") {
        return "color:#bb0331";
      }
      //检验
      else if (row.moeZtbz == "3") {
        return "color:#61b2e0";
      }
    },
    load() {
      if (
        this.queryParams.pageNum <
        Math.ceil(this.total / this.queryParams.pageSize)
      ) {
        // this.$message.success("加载下一页");
        this.queryParams.pageSize = 15;
        this.queryParams.pageNum++;
        listStartOrder(this.queryParams).then((response) => {
          this.startOrderList = this.startOrderList.concat(response.rows);
          this.total = response.total;
          this.loading = false;
          if (row) {
            this.getMx(row);
          } else if (this.startOrderList.length > 0) {
            this.getMx(this.startOrderList[0]);
          } else {
            this.startOrderMxList = [];
          }
        });
      }
      return 0;
    },
    //获取已经维护的子项
    getMx(row) {
      this.nowData = row;

      if (row) {
        //请求后台拿到已经维护的材料明细
        listMx(row.moeJtbh).then((response) => {
          this.startOrderMxList = response.data;
        });
      }
    },
    handleManageMoe(row) {
      moeMstrCheck(row.moeId, this.nowData.moeJtbh).then((response) => {
        this.getList(this.nowData);
      });
    },
    pageChange(page) {
      this.queryParams.pageNum = page;
      this.getList();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openSearch = false;
      this.reset();
    },
    // 表单重置
    reset() {},
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
      this.openSearch = false;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.dateRange = null;
      this.queryParams.somJhrqBegin = null;
      this.queryParams.somJhrqEnd = null;
      this.handleQuery();
    },

    handleSearch() {
      this.reset();
      this.title = "查询材料明细维护";
      this.openSearch = true;
    },
    /** 首件 */
    firstPart(row) {
      const cardId = this.$store.getters.cardId;
      const machine = row.moeJtbh;
      this.$confirm("确认要给" + machine + "刷首件吗？", "确认", {
        cancelButtonText: "取消",
        confirmButtonText: "确认",
        type: "info",
      })
        .then(function () {
          return brushFirstPart(cardId, machine);
        })
        .then((res) => {
          if (res.msg === "操作成功!") {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table__empty-block {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  padding-right: 100%;
}
</style>
